import BaseGroup from '@/components/js/BaseGroup'
import { EventBus } from '@/store/index'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { addEvent, removeEvent } from '@/plugins/dom'
import { getCompIdByParam } from '@/plugins/utils'

export default class CheckBox extends BaseGroup {
  constructor() {
    super();
    //打组多选 2129&pageId=11
    // {need,min,max,isForm}
    this.injectJsClassObj = null
    this.selecteds = []  // 被选中的数据
    this.isForm = false
    this.relateAttrCompId = null
    this.relateAttrComp = null
    // 多选作为表单数据进行提交的时候
    this.componentBtns = [];
    this.need = false
    // 多选： 选中做多出现的索引值作为发博索引，最多选中的
    this.selectIndexList = [] // 选中的索引数据
  }

  start() {
    _.forEach(this.components, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        this.componentBtns.push(compData);
      }
    })
    this.injectJsClassObj = this.item.interactionData.injectJsClassObj
    this.isForm = this.injectJsClassObj.isForm
    this.relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId);
    if (this.relateAttrCompId) {
      this.relateAttrComp = this.componentMap[this.relateAttrCompId]
    }
    let indexType = this.injectJsClassObj.indexType
    if (indexType) {
      this.selectIndexList = _.fill(Array(indexType), 0);
    }
    if(this.isForm){
      // 作为表单数据的时候
      this.commonAttr.need = this.injectJsClassObj.need
      this.commonAttr.min = this.injectJsClassObj.min
      this.commonAttr.max = this.injectJsClassObj.max
      //group-checkout 添加数据给group-checkout
      let dom  = document.getElementById(this.item.id)
      dom.setAttribute('data-id',this.item.id)
      dom.className = dom.className + ' ' + 'group-checkout' 
    }
    

    this.addClickEvent();
  }

  addClickEvent() {
    _.forEach(this.componentBtns, (compData, index) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        let btn = compData.vueContainer.$refs.btn.$el;
        this.onBtnClick = this.onBtnClick.bind(this);
        addEvent(btn, "click", this.onBtnClick);
      }
    })
  }

  onBtnClick(e) {
    if (e) {
      e.stopPropagation()
      e.preventDefault()
    }
    let btn = e.currentTarget;
    let compId = btn.parentElement.id;
    let compData = this.componentMap[compId];
    const index = Number(compData.commonAttr.itemIndex);
    // 判断是否是将多选择作为了表单组件
    const isSelected = compData.commonAttr.isSelected_;
    if (!isSelected && !this.onCheckbox()) {
      return
    }
    if (this.isForm) {
      // 作为表单的情况
      let index_ = this.selecteds.indexOf(index + 1)
      if (!isSelected) {
        if (index_ == -1) {
          this.selecteds.push(index + 1)
          EventBus.$emit("btnStatus", { isSelected: true, compId });
        }
      } else {
        if (index_ != -1) {
          this.selecteds.splice(index_, 1)
          EventBus.$emit("btnStatus", { isSelected: false, compId });
        }
      }
      this.store.commit('updateFormValue', { id: this.item.id, selecteds: this.selecteds})
    } else {
      // 作为普通组件使用的情况
      if (!isSelected) {
        this.selectIndexList[index] = this.selectIndexList[index] ? this.selectIndexList[index] + 1 : 1
        EventBus.$emit("btnStatus", { isSelected: true, compId });
      } else {
        this.selectIndexList[index] = this.selectIndexList[index] ? this.selectIndexList[index] - 1 : 0
        EventBus.$emit("btnStatus", { isSelected: false, compId });
      }

      let time = _.max(this.selectIndexList)
      let itemIndex = this.selectIndexList.indexOf(time)
      this.store.commit('updateComponentAttr', { id: this.item.id, commonAttr: { itemIndex: itemIndex } })
      this.store.commit('updateFormValue', { id: this.item.id, value: itemIndex, selectNum: _.sum(this.selectIndexList) })
    }
  }

  // 多选作为表单数据的时候
  setFormValue() {
    let lists = this.getLists()
    this.store.commit('updateFormValue', { id: this.item.id, selecteds: this.selecteds, lists })
  }

  getLists() {
    let compData = this.componentMap[this.relateAttrCompId]
    let lists = []
    if (compData && compData.interactionData) {
      let lists_ = compData.interactionData.lists
      _.forEach(lists_, item => {
        if (item.params) {
          _.merge(item, JSON.parse(item.params))
          delete item.params
        }
      })
      lists = lists_
    }
    return lists
  }

  // 点击完成数据校验
  onCheckbox() {
    if (this.isH5Edit) {
      return false
    }

    let checkboxNum = this.selecteds.length ? this.selecteds.length : _.sum(this.selectIndexList)
    let max = parseInt(this.injectJsClassObj.max);
    let msg = this.injectJsClassObj.msg
    if (max && checkboxNum >= max) {
      msg = msg ? msg : '多选数量不对！';
      this.showToast(msg);
      return false;
    }
    return true
  }

  destroy() {
    super.destroy();

    EventBus.$emit("btnStatus", { isSelected: false });
    _.forEach(this.componentBtns, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        let btn = compData.vueContainer.$refs.btn.$el;
        removeEvent(btn, "click", this.onBtnClick);
      }
    })
    this.componentBtns = null;
  }
}
